<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>
        <ui:composition template="../../templates/portal/template.xhtml"> 
           <ui:define name="content_left">
                    <!-- INCLUDE PROFILe LEFT MENU --> 
                    <ui:include
                        src="mini_profile.xhtml">
                    </ui:include>
                    <!-- END OF INCLUDE PROFILE -->
                </ui:define>
           <!-- RIGHT CONTENT -->  
            <ui:define name="content_right">      
                <!-- USER BASIC PROFILE INFO FORM -->
                <h:form>
                 <ui:repeat value="#{userProfileBean.selectUserProfileInfo(loginBean.userID)}" var="item">
                     <table class="formal">
                         <tr><td><h:outputLabel value="Name:" for="name" /></td>
                             <td><h:inputText id="name" value="#{item.name}" title="#{item.name}"/></td>
                         </tr>
                         <tr><td><h:outputLabel value="Last name:" for="Last name" /></td>
                             <td><h:inputText id="lastName" value="#{item.lastName}" title="#{item.lastName}"/></td>
                         </tr>
                         <tr><td><h:outputLabel value="Email:" for="email" /></td>
                             <td><h:inputText id="email" value="#{item.email}" title="#{item.email}"/></td>
                         </tr>
                         <tr><td><h:outputLabel value="Gender:" for="gender" /></td>
                            <td> <h:outputText id="gender" value="#{item.gender}"/></td>
                         </tr>
                         <tr><td></td>
                            <td><h:commandButton value="#{msgs.updateProfile}" action="#{userProfileBean.editProfile()}"/> </td>
                         </tr>
                     </table>
                 </ui:repeat> 
                </h:form>
                <!-- END OF USER BASIC PROFILE INFO FORM -->
                <hr class="lineBreakerSoft"/>
                <!-- USER HOBBY LIST -->
                <table class="formal">
                    <tr>
                    <td> Hobbies:</td>
                    <ui:repeat value="#{userProfileBean.selectUserHobbies(loginBean.userID)}" var="hobby">                             
                        <td>#{hobby.name}</td>                     
                    </ui:repeat> 
                    </tr>
                </table>
                <!-- END OF USER HOBBY LIST -->
                <!-- ADD NEW HOBBY INTERFACE -->
               <hr class ="lineBreakerSoft"/>
               <h:form>
                    <table class="formal">
                        <tr><td>Add new hobby:</td>
                            <td><h:selectOneMenu value="#{userProfileBean.selectedItem}" >
                                    <f:selectItem itemValue="#{null}" itemLabel="Select hobby" />
                                    <f:selectItems value="#{userProfileBean.selectAllHobbies()}"/>
                                </h:selectOneMenu>
                            </td>
                        </tr>
                        <tr><td></td>
                            <td><h:commandButton value="#{msgs.updateProfile}" action="#{userProfileBean.addNewHobby(loginBean.userID)}"/></td>
                        </tr>
                    </table>
                </h:form>    
            </ui:define>
        </ui:composition>
         <!--END OF RIGHT CONTENT -->
    </body>
</html>